import { Scene } from "phaser";
import titleImg from "../images/title.png";
import startButtonImg from "../images/start_button.png";
import instructionImg from "../images/instruction.png";
import backgroundImg from "../images/background.png";
import floorImg from "../images/floor.png";
import gameOverImg from "../images/game_over.png";
import pipeImg from "../images/pipe.png";
import birdImg from "../images/bird.png";
import scoreAudio from "../audio/score.wav";
import floorHitAudio from "../audio/floor_hit.wav";
import pipeHitAudio from "../audio/pipe_hit.wav";

export class Preloader extends Scene {
    constructor() {
        super("Preloader");
    }
    preload() {
        // 加载图片
        this.load.image("title", titleImg);
        this.load.image("start_button", startButtonImg);
        this.load.image("instruction", instructionImg);
        this.load.image("background", backgroundImg);
        this.load.image("floor", floorImg);
        this.load.image("game_over", gameOverImg);
        this.load.spritesheet("pipe", pipeImg, {
            frameWidth: 54,
            frameHeight: 320,
        });
        this.load.spritesheet("bird", birdImg, {
            frameWidth: 34,
            frameHeight: 24,
        });

        //加载音效
        this.load.audio("score", scoreAudio);
        this.load.audio("floor_hit", floorHitAudio);
        this.load.audio("pipe_hit", pipeHitAudio);

        let { width, height } = this.cameras.main;
        // 加载中文本
        let loading = this.make
            .text({
                x: width / 2,
                y: height / 2 - 50,
                text: "加载中...",
                style: {
                    font: "20px monospace",
                    color: "#333333",
                },
            })
            .setOrigin(0.5, 0.5);

        // 进度文本
        let percent = this.make
            .text({
                x: width / 2,
                y: height / 2,
                text: "0%",
                style: {
                    font: "18px monospace",
                    color: "#333333",
                },
            })
            .setOrigin(0.5, 0.5);

        // 加载中事件
        this.load.on("progress", function (value: number) {
            percent.setText(Math.round(value * 100) + "%");
        });

        // 加载完成事件，销毁文本对象
        this.load.on("complete", function () {
            loading.destroy();
            percent.destroy();
        });
    }
    create() {
        let { width, height } = this.cameras.main;
        // 添加背景，标题，介绍
        this.cameras.main.setBackgroundColor(0x5ee270);
        this.add.image(0, 0, "background").setOrigin(0, 0);
        this.add.image(width / 2, 100, "title");
        this.add.image(width / 2, height / 2, "instruction");

        // 开始按钮
        var startButton = this.add.image(width / 2, height - 100, "start_button").setInteractive();
        // 按钮事件
        startButton.on("pointerdown", () => {
            // 关闭当前场景并开启 Main 场景
            this.scene.start("Main");
        });

        this.createAnims();
    }
    // 创建动画
    createAnims() {
        // 小鸟飞行
        this.anims.create({
            key: "fly",
            frames: this.anims.generateFrameNumbers("bird", { start: 0, end: 2 }),
            frameRate: 10,
            repeat: -1,
        });
    }
}
